<template>
  <view class="container">
    <!-- 返回导航栏 -->
    <view class="nav-bar">
      <text class="back-icon" @click="goBack">返回</text>
      <text class="title">药品详情</text>
    </view>
    <!-- 药品基本信息 -->
    <view class="medicine-info">
      <image :src="medicine.imageUrl || medicine.defaultImageUrl || '/static/medicine-placeholder.png'" mode="aspectFill" class="medicine-image" />
      <view class="info-content">
        <view class="name-row">
          <text class="medicine-name">{{ medicine.name }}</text>
          <view class="status-tag" :class="medicine.status">
            {{ statusText[medicine.status] }}
          </view>
        </view>
        <text class="medicine-desc">{{ medicine.efficacy }}</text>
        <view class="info-row">
          <text class="label">生产日期：</text>
          <text class="value">{{ formatDate(medicine.productionDate) }}</text>
        </view>
        <view class="info-row">
          <text class="label">有效期至：</text>
          <text class="value">{{ formatDate(medicine.expiryDate) }}</text>
        </view>
        <view class="info-row" v-if="medicine.specification">
          <text class="label">规格：</text>
          <text class="value">{{ medicine.specification }}</text>
        </view>
        <view class="info-row" v-if="medicine.remainingQuantity !== undefined">
          <text class="label">剩余数量：</text>
          <text class="value">{{ medicine.remainingQuantity }}{{ medicine.specification?.includes('片') ? '片' : '盒' }}</text>
        </view>
      </view>
    </view>

    <!-- 用法用量 -->
    <view class="section">
      <text class="section-title">用法用量</text>
      <view class="usage-content">
        <text class="usage-text">{{ medicine.usage }}</text>
      </view>
    </view>

    <!-- 注意事项 -->
    <view class="section">
      <text class="section-title">注意事项</text>
      <view class="precautions-content">
        <text class="precaution-item" v-for="(item, index) in medicine.precautions" :key="index">· {{ item }}</text>
      </view>
    </view>

    <!-- 编辑按钮 -->
    <view class="edit-btn" @click="navigateToEdit">
      <text class="btn-text">编辑信息</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { Medicine } from '@/types'

// 获取路由参数
const query = defineProps<{ id: string }>()

// 状态文本映射
const statusText = {
  normal: '正常',
  expired: '已过期',
  nearExpiry: '即将过期'
}

// 药品数据
const medicine = ref<Medicine>({
  id: parseInt(query.id),
  name: '阿莫西林胶囊',
  imageUrl: '',
  efficacy: '用于敏感菌所致的感染',
  productionDate: new Date(2024, 0, 1),
  expiryDate: new Date(2025, 0, 1),
  usage: '口服。一次1粒，一日3次，饭前或饭后服用。',
  precautions: [
    '对青霉素类药物过敏者禁用',
    '服药期间忌烟酒',
    '如出现皮疹等过敏反应请立即停药',
    '儿童、孕妇慎用'
  ],
  status: 'normal'
})

// 格式化日期
const formatDate = (date: Date) => {
  return new Date(date).toLocaleDateString()
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 跳转到编辑页面
const navigateToEdit = () => {
  uni.navigateTo({
    url: `/pages/medicine/edit?id=${medicine.value.id}`
  })
}

// 获取药品详情
const loadMedicineDetail = async () => {
  // TODO: 调用接口获取药品详情
}

onMounted(() => {
  loadMedicineDetail()
})
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 30rpx;
  padding-top: 120rpx;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  z-index: 100;
  border-bottom: 1rpx solid #f0f0f0;

  .back-icon {
    font-size: 28rpx;
    color: #333333;
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-right: 44rpx;
  }
}

.medicine-info {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  .medicine-image {
    width: 100%;
    height: 400rpx;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
  }

  .info-content {
    .name-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16rpx;
    }

    .medicine-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }

    .status-tag {
      padding: 4rpx 16rpx;
      border-radius: 24rpx;
      font-size: 24rpx;
      color: #ffffff;

      &.normal {
        background: #52c41a;
      }

      &.expired {
        background: #f5222d;
      }

      &.nearExpiry {
        background: #faad14;
      }
    }

    .medicine-desc {
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 20rpx;
    }

    .info-row {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        font-size: 28rpx;
        color: #999999;
      }

      .value {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
}

.section {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20rpx;
  }

  .usage-content {
    .usage-text {
      font-size: 28rpx;
      color: #666666;
      line-height: 1.6;
    }
  }

  .precautions-content {
    .precaution-item {
      font-size: 28rpx;
      color: #666666;
      line-height: 1.6;
      margin-bottom: 12rpx;
      display: block;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.edit-btn {
  position: fixed;
  bottom: 40rpx;
  left: 30rpx;
  right: 30rpx;
  height: 88rpx;
  background: #018d71;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .btn-text {
    font-size: 32rpx;
    color: #ffffff;
  }
}
</style>